<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation-direction</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <link rel="stylesheet" href="../../styles/normalize.css" />
    <style type="text/css">
      .box {
        background-color: rebeccapurple;
        border-radius: 10px;
        width: 100px;
        height: 100px;
      }
      /**
        normal vs reverse 
        正向 vs 反向
        alternate vs alternate-reverse 
        正向交替 vs 反向交替
      */
      .box.start-move {
        animation-name: move-right;
        animation-duration: 3s;
        animation-direction: alternate;
        animation-iteration-count: 2;
      }

      @keyframes move-right {
        0% {
          margin-left: 0;
        }
        100% {
          margin-left: calc(100% - 100px);
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <button id="btn">start move</button>
    <script>
      $(document).ready(function () {
        $("#btn").on("click", function () {
          $($(".box")[0]).addClass("start-move");
        });
      });
    </script>
  </body>
</html>
